<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="stylesheet"
            href="https://unpkg.com/swiper@8/swiper-bundle.css"
        />
        <link
            rel="stylesheet"
            href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
        />
        <script src="https://unpkg.com/swiper@8/swiper-bundle.js"></script>
        <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
        <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js.map"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <title>Document</title>
    </head>
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 100%;
            padding-top: 50px;
            padding-bottom: 50px;
        }

        .swiper-slide {
            background-position: center;
            background-size: cover;
            width: 300px;
            height: 300px;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
        }
    </style>
    <body>
        <div
            style="
                width: 50px;
                height: 50px;
                position: absolute;
                z-index: 99999;
                font-size: 20px;
                background: rgb(0, 0, 0, 0.5);
                border-radius: 50px;
                text-align: center;
                line-height: 50px;
                left: 10px;
                top: 10px;
            "
            onclick="history.go(-1);"
        >
            ◀
        </div>

        <img
            src="https://gw.alicdn.com/tfscom/i4/TB1IYn0jcj_B1NjSZFHXXaDWpXa_.jpg"
            alt=""
            style="
                width: 100%;
                height: 180px;
                position: relative;
                top: 0px;
                z-index: 888;
            "
        />
        <div
            style="
                width: 95%;
                height: 150px;
                margin: auto;
                background-color: #fff;
                position: relative;
                top: -100px;
                z-index: 99999;
                border-radius: 10px;
            "
        >
            <b style="font-size: 20px; padding-left: 10px">横店电影城 ></b
            ><br />
            <span style="padding-left: 10px">某某某地区进行开放.....</span>
            <h1>观影请佩戴口罩</h1>
        </div>
        <div
            class="swiper mySwiper"
            style="background: #fff; margin-top: -90px"
        >
            <div class="swiper-wrapper" id="boxs"></div>
        </div>

        <div id="detail"></div>

        <div id="big"></div>
    </body>
    <script>
        var swiper = new Swiper(".mySwiper", {
            effect: "coverflow",
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: "auto",
            coverflowEffect: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
            },
            pagination: {
                el: ".swiper-pagination",
            },
        });

        $(function () {
            fun();
            vote();
            buy();
        });

        var str = localStorage.getItem("str");
        var arr = JSON.parse(localStorage.getItem("arr"));
        var arrs = [];

        function fun() {
            let html = "";
            for (i in arr) {
                for (j in arr[i]) {
                    html += `<div class="swiper-slide" style="width:150px;heigth:80px"><img src="${arr[i][j].img}" alt="" style="width:150px" onclick="vote(${arr[i][j].id})"> </div>`;
                    arrs.push(arr[i][j]);
                }
            }
            $("#boxs").html(html);
        }

        function buy() {
            let html = "";
            let num = 1;
            for (let i = 0; i < 2; i++) {
                html += `<div id="buy">
                    <span style='margin-left:25px'>${num++}号厅</span>
                            <div
                                style="
                                    float: left;
                                    color: #ccc;
                                    margin-left: 10px;
                                    margin-top: 20px;
                                "
                            >
                                <span style="font-size: 30px">21:20</span>
                                <br />
                                <span>21:13进场</span>
                            </div>
                            <div style="margin-left: 10px; margin-top: 20px; float: left">
                                <span>国语2D</span>
                                <br /><br />
                                <span style="color: #ccc">7厅</span>
                            </div>
                            <div style="width: fit-content;height: 40px;left:150px; top: -50px;position: relative;">
                                <span style="color: red; font-size: 20px"
                                    >新人价￥<span>30.0</span>起</span
                                >
                                <br />
                                <span style="color: #ccc"
                                    >影城卡价￥<span>30.0</span>起</span
                                >
                            </div>
                            <div id="buttons">
                                <button onclick="BuyyFun(${num})">选座</button>
                            </div>
                            
                        </div>`;
            }
            $("#big").html(html);
        }

        function BuyyFun(num) {
            if (num == 2) {
                window.location.href = "./yingting1.html";
            } else if (num == 3) {
                window.location.href = "./yingting2.html";
            }
        }

        function vote(id = str) {
            let arrse = arrs.filter((res) => {
                return res.id == id;
            });
            let html = "";
            arrse.map((res) => {
                html +=
                    "<span id='fos'>" +
                    res.nm +
                    "<span id='span'>评分" +
                    res.sc +
                    "</span>" +
                    "</span>";
            });
            $("#detail").html(html);
            if (!localStorage.getItem("arrse")) {
                localStorage.setItem("arrse", JSON.stringify([]));
            }
            localStorage.setItem("arrse", JSON.stringify(arrse));
        }
    </script>

    <style>
        #detail {
            width: 100%;
            height: 90px;
            /* border: 1px solid #000; */
            margin: auto;
            background-color: #fff;
            border-radius: 10px;
            text-align: center;
            line-height: 100px;
        }

        #buy {
            width: 95%;
            height: 90px;
            /* border: 1px solid #000; */
            margin: auto;
            background-color: #fff;
            border-radius: 10px;
            margin-top: 20px;
        }

        #boxs {
            width: 50px;
        }

        #span {
            color: rgb(239, 204, 4);
        }

        #fos {
            font-size: 25px;
            margin: auto;
        }

        #buttons {
            position: relative;
            width: 200px;
            top: -30px;
            left: 155px;
        }

        #buttons button {
            width: 50px;
            height: 30px;
            background-color: rgba(237, 129, 5, 0.556);
            border: 1px #fff solid;
            border-radius: 30px;
        }
    </style>
</html>
